<template>
  <div class="welcome">
    <div style="height:36px;"></div>
    <div style="display:flex;justify-content: space-evenly;align-items: center;padding-top: 30px;">
      <div class="parent">
        <div class="card">
          <div class="logo">
            <span class="circle circle1"></span>
            <span class="circle circle2"></span>
            <span class="circle circle3"></span>
            <span class="circle circle4"></span>
            <span class="circle circle5">
<svg t="1740753863555" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7135" width="32" height="32">
  <path d="M818.784 697.43a21.22 21.22 0 0 1-6.25-15.06V446.328c0-11.766 9.532-21.296 21.312-21.296 11.75 0 21.28 9.532 21.28 21.296V682.4c0 11.75-9.53 21.28-21.28 21.28-5.876 0-11.22-2.376-15.062-6.25zM733.596 654.838a21.096 21.096 0 0 1-6.25-15.062v-111.808c0-11.75 9.532-21.296 21.312-21.296 11.75 0 21.282 9.546 21.282 21.296v111.808c0 11.782-9.532 21.312-21.282 21.312a21.16 21.16 0 0 1-15.062-6.25zM733.596 782.646a21.206 21.206 0 0 1-6.25-15.062V711.68a21.296 21.296 0 0 1 21.312-21.31c11.75 0 21.282 9.53 21.282 21.31v55.904c0 11.75-9.532 21.282-21.282 21.282a21.258 21.258 0 0 1-15.062-6.22zM903.968 484.466a21.312 21.312 0 0 1-6.25-15.062v-102.934c0-11.766 9.562-21.298 21.312-21.298s21.312 9.532 21.312 21.298v102.934c0 11.766-9.562 21.296-21.312 21.296a21.26 21.26 0 0 1-15.062-6.234z" fill="#DA4453" p-id="7136"></path><path d="M340.214 605.712l30.094-30.092L945.906 0.008s120.464 240.948 0 361.43c-120.498 120.482-409.914 409.958-409.914 409.958l-30.124-30.124-15.062 15.062-150.592-150.622z" fill="#E6E9ED" p-id="7137"></path><path d="M505.868 741.274l30.124 30.124S825.408 481.922 945.906 361.44c31.216-31.218 46.248-70.53 51.404-111.638L502.492 744.618l-7.812 7.844 11.188-11.188z" fill="#ED5564" p-id="7138"></path><path d="M69.126 876.802l271.088-271.09 150.59 150.624-90.404 30.154-120.434 120.438-75.31 105.402c-33.25 33.282-132.374-11.906-165.654-45.154-33.25-33.282-3.126-57.092 30.124-90.374z" fill="#434A54" p-id="7139"></path><path d="M189.592 876.802c8.344 8.312 8.344 21.812 0 30.124-8.312 8.31-21.78 8.31-30.092 0-8.344-8.312-8.344-21.812 0-30.124 8.312-8.312 21.78-8.312 30.092 0zM249.84 816.552c8.312 8.312 8.312 21.812 0 30.124-8.312 8.312-21.812 8.312-30.124 0s-8.312-21.812 0-30.124 21.814-8.312 30.124 0zM310.09 756.336c8.312 8.31 8.312 21.78 0 30.124-8.312 8.312-21.812 8.312-30.124 0-8.312-8.344-8.312-21.812 0-30.124 8.312-8.312 21.812-8.312 30.124 0z" fill="#AAB2BC" p-id="7140"></path></svg>
          </span>

          </div>
          <div class="glass"></div>
          <div class="content">
            <span class="title">AI·删除器</span>
            <span class="text">小心 BE CAREFUL</span>
            <span class="text">一朝被蛇咬，十年怕井绳</span>
            <span style="font-size: 12px">告诉老莫，我想吃鱼了</span>
          </div>
          <div class="bottom">

            <div class="social-buttons-container">
              <button class="social-button .social-button4" @click="navToAI">
                <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 512 207">
                  <defs>
                    <linearGradient id="logosAix0" x1="5.807%" x2="274.587%" y1="101.291%" y2="-4.88%">
                      <stop offset="0%" stop-color="#71dc6f"/>
                      <stop offset="30.49%" stop-color="#71dc6f"/>
                      <stop offset="92.79%" stop-color="#76009d"/>
                      <stop offset="100%" stop-color="#76009d"/>
                    </linearGradient>
                    <linearGradient id="logosAix1" x1="-9.904%" x2="128.371%" y1="101.291%" y2="-4.857%">
                      <stop offset="0%" stop-color="#71dc6f"/>
                      <stop offset="30.49%" stop-color="#71dc6f"/>
                      <stop offset="92.79%" stop-color="#76009d"/>
                      <stop offset="100%" stop-color="#76009d"/>
                    </linearGradient><linearGradient id="logosAix2" x1="-136.658%" x2="130.35%" y1="101.291%" y2="-4.857%">
                    <stop offset="0%" stop-color="#71dc6f"/><stop offset="30.49%" stop-color="#71dc6f"/>
                    <stop offset="92.79%" stop-color="#76009d"/><stop offset="100%" stop-color="#76009d"/>
                  </linearGradient>
                  </defs>
                  <path fill="url(#logosAix0)" d="m142.163 206.178l-14.595-49.03H59.544l-14.596 49.03H0L67.147.045h54.874l66.27 206.133zM93.991 40.79h-1.46l-22.48 78.274h46.7z"/><path fill="url(#logosAix1)" d="M208.731 206.178v-35.739h26.27v-134.7h-26.27V0h96.909v35.739h-26.27v134.7h26.27v35.739z"/><path fill="url(#logosAix2)" d="M512 206.178h-51.382l-44.086-75.913h-.876l-42.912 75.913h-47.875l65.393-106.63L328.078 0h51.664l39.703 69.703h.876L460.603 0h47.875l-62.763 100.435z"/></svg>
              </button>
              <button class="social-button .social-button1" @click="copyDOUYIN">
                <svg  class="svg" viewBox="0 0 1024 1024"  xmlns="http://www.w3.org/2000/svg" width="15" height="15">
                  <path d="M937.4 423.9c-84 0-165.7-27.3-232.9-77.8v352.3c0 179.9-138.6 325.6-309.6 325.6S85.3 878.3 85.3 698.4c0-179.9 138.6-325.6 309.6-325.6 17.1 0 33.7 1.5 49.9 4.3v186.6c-15.5-6.1-32-9.2-48.6-9.2-76.3 0-138.2 65-138.2 145.3 0 80.2 61.9 145.3 138.2 145.3 76.2 0 138.1-65.1 138.1-145.3V0H707c0 134.5 103.7 243.5 231.6 243.5v180.3l-1.2 0.1" p-id="2694" fill="#000000"></path></svg>
              </button>
              <button class="social-button .social-button2" @click="copyWECHAT">
                <svg class="svg" viewBox="0 0 1024 1024"  xmlns="http://www.w3.org/2000/svg"  width="15" height="15">
                  <path d="M308.73856 119.23456C23.65696 170.15296-71.37024 492.23936 155.392 639.66464c12.43392 7.99232 12.43392 7.104-6.21824 62.76096l-15.98464 47.65952 57.43104-30.784 57.43104-30.78656 30.49216 7.40096c31.96928 7.99232 72.82432 13.61664 100.0576 13.61664l16.28416 0-5.62688-21.61152c-44.70016-164.5952 109.82912-327.71072 310.8352-327.71072l27.2384 0-5.62432-19.53792C677.59616 186.43456 491.392 86.67136 308.73856 119.23456zM283.87072 263.40352c30.1952 20.4288 31.97184 64.5376 2.95936 83.48416-47.06816 30.78656-102.1312-23.38816-70.45632-69.57056C230.28736 256.59648 263.74144 249.78688 283.87072 263.40352zM526.62016 263.40352c49.73568 33.45408 12.43392 110.71744-43.22304 89.40288-40.25856-15.39328-44.99712-70.75072-7.40096-90.5856C490.79808 254.22848 513.88928 254.81984 526.62016 263.40352zM636.44928 385.37216c-141.2096 25.7536-239.19872 132.91776-233.57184 256.06656 7.40096 164.89472 200.71168 278.56896 386.32448 227.65312l21.90592-5.92128 46.1824 24.8704c25.4592 13.9136 46.77376 23.97696 47.36512 22.79168 0.59392-1.47968-4.43648-19.24352-10.95168-39.6672-14.79936-45.59104-15.09632-42.33472 4.73856-56.54272C1121.64864 654.464 925.67552 332.97408 636.44928 385.37216zM630.82496 518.28992c12.4288 8.28928 18.944 29.01248 13.61408 44.1088-11.24864 32.26624-59.49952 34.63424-72.52992 3.55328C557.10976 530.13248 597.9648 496.97536 630.82496 518.28992zM828.57472 521.84576c19.53792 18.64704 16.2816 50.32448-6.51264 62.16448-34.93376 17.76128-71.63904-17.76128-53.58336-51.80416C780.32128 510.2976 810.81344 504.97024 828.57472 521.84576z" fill="#000000" p-id="6404"></path></svg>
              </button>
              <button class="social-button .social-button3" @click="copyQQ">
                <!--              <svg viewBox="0 0 640 512" xmlns="http://www.w3.org/2000/svg" class="svg">-->
                <!--                <path d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"></path>-->
                <!--              </svg>-->
                <svg  class="svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="15" height="15">
                  <path d="M116.435 593.714c-33.54 78.964-38.985 154.297-12.059 168.37 18.572 9.696 47.686-12.382 74.936-52.909 10.791 44.157 37.493 84.137 75.633 116.21-40.004 14.768-66.135 38.886-66.135 66.232 0 44.954 70.709 81.302 157.978 81.302 78.716 0 143.907-29.538 155.94-68.371 3.232-0.049 15.663-0.049 18.796 0 12.083 38.784 77.324 68.371 155.989 68.371 87.267 0 157.978-36.398 157.978-81.302 0-27.297-26.105-51.464-66.135-66.232 38.089-32.123 64.889-72.053 75.631-116.21 27.251 40.527 56.29 62.605 74.887 52.909 26.95-14.073 21.631-89.456-12.032-168.37-26.355-62.058-62.11-107.754-89.457-117.848 0.398-3.929 0.596-7.958 0.596-11.935 0-23.968-6.661-46.146-18.049-64.196 0.199-1.393 0.199-2.834 0.199-4.227 0-11.038-2.636-21.381-7.114-30.332-6.909-161.309-111.93-289.402-281.866-289.402-170.036 0-275.106 128.093-281.943 289.402-4.525 9.001-7.135 19.343-7.135 30.332 0 1.393 0.099 2.835 0.15 4.227-11.288 18.05-17.951 40.178-17.951 64.196 0 3.978 0.15 7.955 0.498 11.935-27.151 10.094-63.028 55.841-89.333 117.848z" fill="#000000" p-id="5212">
                  </path>
                </svg>
              </button>

            </div>
            <div class="view-more">
              <button class="view-more-button">更多...</button>
              <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
            </div>
          </div>
        </div>
      </div>

      <div>
        <div style="font-size: 56px;" class="title-txt">AI删除器</div>
        <div style="font-size: 16px;color:white;font-style: italic;float:right;">--卓越的删除工具</div>
      </div>
    </div>
    <div>
      <div class="cards">
        <div class="card-item red"  @click="toAuto">
          <p class="tip">批量删除</p>
          <p class="second-text">小心AND小心</p>
        </div>
        <div class="card-item blue" @click="toManual">
          <p class="tip">手工删除</p>
          <p class="second-text">慢点LOOP慢点</p>
        </div  >
      </div>
    </div>

    <div class="info">
      <t-divider><span style="color:#ddd;">联系作者</span></t-divider>
      <div style="float:right;padding-right:30px;">
        <t-button shape="circle" theme="primary"   @click="toSetting" >
          <template #icon> <Setting1Icon /></template>
        </t-button>
        邮箱:yuanhaozhuzhu@hotmail.com
      </div>
    </div>

    <div class="version">v1.0.0</div>
  </div>
</template>

<script setup>
import {Setting1Icon} from "tdesign-icons-vue-next";
import router from "../router/index.js";
const toAuto = ()=>{
  router.push({path:`/auto`})
}
const toManual = ()=>{
  router.push({path:`/manual`})
}
const toSetting=()=>{
  router.push({path:`/setting`})
}
const copyDOUYIN = ()=>{
  navigator.clipboard.writeText("2- 长按复制此条消息，打开抖音搜索，查看TA的更多作品。 https://v.douyin.com/i5mRKrc6/ 2@3.com :9pm");
  MessagePlugin.success("已复制到剪贴板");
}
const copyWECHAT = ()=>{
  navigator.clipboard.writeText("dzqx2012");
  MessagePlugin.success("已复制到剪贴板");

}
const copyQQ = ()=>{
  navigator.clipboard.writeText("365642617");
  MessagePlugin.success("已复制到剪贴板");
}
const navToAI = ()=>{
  router.push({path:`/ai`})
}
</script>

<style  scoped>
.welcome{
  height:100vh;
  width:100vw;
  background-image: linear-gradient(25deg, #3927a2, #7d56a7, #b088aa, #dfbdab)
}
.title-txt{
  font-family: "Manrope,sans-serif";
  background: linear-gradient(45deg, #6638f0,#f78ae0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.parent {
  width: 290px;
  height: 300px;
  perspective: 1000px;
}

.card {
  height: 100%;
  border-radius: 50px;
  background: linear-gradient(135deg, rgb(0, 255, 214) 0%, rgb(8, 226, 96) 100%);
  transition: all 0.5s ease-in-out;
  transform-style: preserve-3d;
  box-shadow: rgba(5, 71, 17, 0) 40px 50px 25px -40px, rgba(5, 71, 17, 0.2) 0px 25px 25px -5px;
}

.glass {
  transform-style: preserve-3d;
  position: absolute;
  inset: 8px;
  border-radius: 55px;
  border-top-right-radius: 100%;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.349) 0%, rgba(255, 255, 255, 0.815) 100%);
  /* -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px); */
  transform: translate3d(0px, 0px, 25px);
  border-left: 1px solid white;
  border-bottom: 1px solid white;
  transition: all 0.5s ease-in-out;
}

.content {
  padding: 100px 60px 0px 30px;
  transform: translate3d(0, 0, 26px);
}

.content .title {
  display: block;
  color: #00894d;
  font-weight: 900;
  font-size: 20px;
}

.content .text {
  display: block;
  color: rgba(0, 137, 78, 0.7647058824);
  font-size: 15px;
  margin-top: 20px;
}

.bottom {
  padding: 10px 12px;
  transform-style: preserve-3d;
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transform: translate3d(0, 0, 26px);
}

.bottom .view-more {
  display: flex;
  align-items: center;
  width: 40%;
  justify-content: flex-end;
  transition: all 0.2s ease-in-out;
}

.bottom .view-more:hover {
  transform: translate3d(0, 0, 10px);
}

.bottom .view-more .view-more-button {
  background: none;
  border: none;
  color: #00c37b;
  font-weight: bolder;
  font-size: 12px;
}

.bottom .view-more .svg {
  fill: none;
  stroke: #00c37b;
  stroke-width: 3px;
  max-height: 15px;
}

.bottom .social-buttons-container {
  display: flex;
  gap: 10px;
  transform-style: preserve-3d;
}

.bottom .social-buttons-container .social-button {
  width: 30px;
  aspect-ratio: 1;
  padding: 5px;
  background: rgb(255, 255, 255);
  border-radius: 50%;
  border: none;
  display: grid;
  place-content: center;
  box-shadow: rgba(5, 71, 17, 0.5) 0px 7px 5px -5px;
}

.bottom .social-buttons-container .social-button:first-child {
  transition: transform 0.2s ease-in-out 0.4s, box-shadow 0.2s ease-in-out 0.4s;
}

.bottom .social-buttons-container .social-button:nth-child(2) {
  transition: transform 0.2s ease-in-out 0.6s, box-shadow 0.2s ease-in-out 0.6s;
}

.bottom .social-buttons-container .social-button:nth-child(3) {
  transition: transform 0.2s ease-in-out 0.8s, box-shadow 0.2s ease-in-out 0.8s;
}
.bottom .social-buttons-container .social-button:nth-child(4) {
  transition: transform 0.2s ease-in-out 0.8s, box-shadow 0.2s ease-in-out 0.8s;
}
.bottom .social-buttons-container .social-button .svg {
  width: 15px;
  fill: #00894d;
}

.bottom .social-buttons-container .social-button:hover {
  background-color: #00894d; /* 亮蓝色 */
  cursor: pointer;
}

.bottom .social-buttons-container .social-button:hover .svg {
  fill: white;
}

.bottom .social-buttons-container .social-button:active {
  background: rgb(255, 234, 0);
}

.bottom .social-buttons-container .social-button:active .svg {
  fill: black;
}

.logo {
  position: absolute;
  right: 0;
  top: 0;
  transform-style: preserve-3d;
}

.logo .circle {
  display: block;
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  top: 0;
  right: 0;
  box-shadow: rgba(100, 100, 111, 0.2) -10px 10px 20px 0px;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background: rgba(0, 249, 203, 0.2);
  transition: all 0.5s ease-in-out;
}

.logo .circle1 {
  width: 170px;
  transform: translate3d(0, 0, 20px);
  top: 8px;
  right: 8px;
}

.logo .circle2 {
  width: 140px;
  transform: translate3d(0, 0, 40px);
  top: 10px;
  right: 10px;
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  transition-delay: 0.4s;
}

.logo .circle3 {
  width: 110px;
  transform: translate3d(0, 0, 60px);
  top: 17px;
  right: 17px;
  transition-delay: 0.8s;
}

.logo .circle4 {
  width: 80px;
  transform: translate3d(0, 0, 80px);
  top: 23px;
  right: 23px;
  transition-delay: 1.2s;
}

.logo .circle5 {
  width: 50px;
  transform: translate3d(0, 0, 100px);
  top: 30px;
  right: 30px;
  display: grid;
  place-content: center;
  transition-delay: 1.6s;
}

.logo .circle5 .svg {
  width: 20px;
  fill: white;
}

.parent:hover .card {
  transform: rotate3d(1, 1, 0, 12deg);
  box-shadow: rgba(5, 71, 17, 0.3) 30px 50px 25px -40px, rgba(5, 71, 17, 0.1) 0px 25px 30px 0px;
}

.parent:hover .card .bottom .social-buttons-container .social-button {
  transform: translate3d(0, 0, 10px)  scale(1.2);
  box-shadow: rgba(5, 71, 17, 0.2) -5px 20px 10px 0px;
}

.parent:hover .card .logo .circle2 {
  transform: translate3d(0, 0, 60px);
}

.parent:hover .card .logo .circle3 {
  transform: translate3d(0, 0, 80px);
}

.parent:hover .card .logo .circle4 {
  transform: translate3d(0, 0, 100px);
}

.parent:hover .card .logo .circle5 {
  transform: translate3d(0, 0, 120px);
}


.cards {
  margin-top: 30px;
  display: flex;
  justify-content: space-evenly;
}

.cards .red {
  width:100%;
  background-image: linear-gradient(25deg, #00f8fc, #a2f1c7, #d8ea90, #fce253)
}

.cards .blue {
  background-image: linear-gradient(25deg, #bd4dff, #cc8ad8, #cebcaf, #c4eb7f)
}

.cards .card-item {
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  height: 100px;
  width: 250px;
  border-radius: 8px;
  color: white;
  cursor: pointer;
  transition: 400ms;
}

.cards .card-item p.tip {
  color:black;
  width:100%;
  font-size: 1.2em;
  font-weight: 700;
}

.cards .card-item p.second-text {
  color:#999;
  text-decoration: underline;
  text-align: right;
  width:100%;
  font-size: .7em;
}

.cards .card-item:hover {
  transform: scale(1.1, 1.1);
}

.cards:hover > .card-item:not(:hover) {
  filter: blur(10px);
  transform: scale(0.9, 0.9);
}
.info{
  width:100%;
  font-size: 14px;
  position: absolute;
  color:#ddd;
  bottom: 30px;
}
.version{
  text-align: center;
  font-size: 14px;
  position: absolute;
  bottom: 10px;
  color:#ddd;
  right:10px;
}
</style>